a,aside,body,div,footer,html,i,img,li,nav,p,section,ul{padding:0;margin:0}
li{list-style:none}
a{text-decoration:none}
body{font-size:12px;color:#4d4d4d;font-family:Helvetica Neue,Microsoft Yahei}
.container,.main,body{background:#f3f6f8}
.iconfont{color:#6b7386;padding-right:4px}
.container .left-bar{position:fixed;
                     padding:0 20px;
                     background:#30333c;
                     color:#6b7386;
                     box-sizing:border-box;
                     flex-direction:column;
                     height:100vh;
                     display:flex;
                     width:248px;
                     transition:all .5s}
.container .main{position:relative;
                 display:flex;
                 flex-direction:column;
                 -webkit-box-orient:vertical;
                 margin-left:248px}
.container .main .iconfont{font-size:18px;color:#000}
.set-scroll{background-color:#494f5e;
            border-radius:0;
            width:4px}
.left-bar .title{color:#fff;
                 font-size:18px;
                 height:50px;
                 line-height:50px}
.left-bar .title p{text-align:center}
.left-bar .nav{flex:1;-webkit-box-flex:1;flex-grow:1}
.left-bar .nav .item{height:48px;
                     line-height:46px;
                     border-top:2px solid rgba(255,255,255,.04);
                     border-bottom:2px solid rgba(255,255,255,.04)}
.left-bar .nav>.active{position:relative}
.left-bar .nav>.active .line{position:absolute;
                             right:0;
                             height:30px;
                             width:3px;
                             background:#3a85ff;
                             z-index:100000;
                             margin-top:10px}
.left-bar .nav-item{min-height:100vh;overflow-y:scroll}
.left-bar .nav-item::-webkit-scrollbar-track{background-color:#494f5e;border-radius:0;width:4px}
.left-bar .nav-item::-webkit-scrollbar-thumb{background-color:#494f5e;border-radius:0;width:4px}
.left-bar .nav-item::-webkit-scrollbar{background-color:#494f5e;border-radius:0;width:4px}
.left-bar .nav-item li{padding-left:20px;height:32px;line-height:32px}
.left-bar .nav-item li:hover a,
.left-bar .nav-item li:hover i,
.left-bar .nav-item li>.active,
.left-bar .nav-item li>.active i{color:#fff}
.left-bar .nav-item li a{text-decoration:none;font-size:12px;display:inline-block;width:100%;color:#6b7386}
.nav .item a{color:#fff}
.nav .comment{position:fixed;z-index:100;bottom:1px;width:200px;background:#30333c}
.main #mainContent{max-width:1200px}
.main .box{overflow:hidden;margin:20px 30px;background:#fff;padding-bottom:20px}
.main .box .sub-category>div{padding:12px 0 0 2.1%;font-size:18px}
.main .box .item{width:20%;
                 border:1px solid #e4ecf3;
                 box-shadow:1px 2px 3px #f2f6f8;
                 border-radius:6px;
                 background:#fff;
                 padding:10px;
                 min-width:200px;
                 margin:22px 0 0 2.1%;
                 float:left;
                 overflow:hidden;
                 transition:all .3s}
.main .box .item:hover{transform:translateY(-5px)}
.main .box .item .no-logo{color:#3273dc;font-weight:700;font-size:14px}
.main .box .item .logo{height:40px;
                       position:relative;
                       font-size:14px;
                       font-weight:700;
                       color:#3273dc;
                       overflow:hidden;
                       text-overflow:ellipsis;
                       white-space:nowrap;
                       padding:0 .1rem}
.main .box .item .logo img{width:40px;
                           height:40px;
                           border-radius:50%;
                           vertical-align:middle}
.main .box .item .desc{color:gray;
                       font-size:12px;
                       padding-top:10px;
                       height:35px;
                       overflow:hidden;
                       text-overflow:ellipsis;
                       display:-webkit-box;
                       -webkit-line-clamp:2;
                       -webkit-box-orient:vertical}
.footer{width:100%;
        bottom:0;
        line-height:45px;
        background:#fff;
        box-shadow:0 0 1rem rgba(0,0,0,.2)}
.footer .copyright{margin-left:30px;color:#949494;font-size:12px}
.footer .copyright a{text-decoration:none;color:#3a85ff}
#menu-box{display:none;
          width:100%;
          background:#fff;
          text-align:right;
          position:sticky;
          top:0;
          z-index:2;
          box-shadow:1px 1px 8px #e0ddf;height:50px}
#menu-box #menu{height:50px;width:40px;position:absolute;right:10px}
#menu-box #menu *{transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box}
#menu-box #menu input[type=checkbox]{display:none}
#menu-box #menu input[type=checkbox]:checked~.menu-spin>.horizontal{opacity:0}
#menu-box #menu input[type=checkbox]:checked~.menu-spin>.line-1{transform:rotate(405deg);
                                                                -webkit-transform:rotate(405deg);margin-top:10px}
#menu-box #menu input[type=checkbox]:checked~.menu-spin>.line-2{transform:rotate(-405deg);
                                                                -webkit-transform:rotate(-405deg);margin-top:-10px}
#menu-box #menu label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:10px;left:0}
#menu-box #menu label .line{position:absolute;height:4px;width:100%;background-color:#a2a2a2}
#menu-box #menu label .horizontal{top:10px}
#menu-box #menu label .line-2{top:20px}
.download a,.download i{color:#3668bd!important}
#fixedBar{padding:10px;background:#fff;width:25px;height:25px;position:fixed;
          right:10px;bottom:30px;z-index:9999;box-shadow:0 0 20 #eee;
          box-shadow:0 0 20px #ccc;cursor:pointer;display:none}
#fixedBar svg{color:#9e9e9e}
@media screen and (max-width:481px){
    .container .box .item{width:39%;min-width:100px}
    .container .main{margin-left:0}
    .container .left-bar{z-index:999;left:-249px}
    #menu-box{display:block}}
@media screen and (min-width:481px){.container .left-bar{left:0}}
@media screen and (min-width:482px) and (max-width:789px){.container .box .item{width:90%}.container .left-bar{left:0}}
@media screen and (min-width:790px) and (max-width:1039px){.container .box .item{width:43%}}
@media screen and (min-width:1040px) and (max-width:1920px){.container .box .item{width:20%}}

.footer{border-top:1px solid #E8E8E8; 
        padding:15px 0;
        font-family:tahoma,Arial;
        font-size:12px;
        color:#999;
        line-height:22px;
        text-align:center}
.footer a,.footer a:hover{color:#999}